<template>
   <div class="SpaceBanner1-component">
        <div class="swiper-container gallery-top2 SpaceBanner2">
            <div class="swiper-wrapper">
                <div class="swiper-slide" :key=" index" v-for="(sb,index) in spaceBanner">
                    <a :href="sb.url" id="example1" target="_blank">
                        <img :src="sb.url">
                    </a>
                </div>
            </div>
            <div class="swiper-button-prev swiper-button-black"></div>
            <div class="swiper-button-next swiper-button-black"></div>
        </div>
        <div class="mengban">
            <div class="tit">
                <span>
                    平面圖
                </span>
            </div>
            <div class="swiper-container gallery-thumbs2 SpaceBanner22">
                <div class="swiper-wrapper ">
                    <div class="swiper-slide " :key="index" v-for="(sb,index) in spaceBanner">
                        <img :src="sb.url">
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
   </div>
</template>

<script>
import Swiper from '../../static/js/swiper-3.4.2.min'
import $ from '../../static/js/jquery2.min'
import Imgbox from '../../static/js/jquery.imgbox.pack'

export default {
    props:{
        spaceBanner:Array,
    },
	components:{
		
	},
    data(){
        return{

        }
    },
    mounted(){
       
    var spaceBanner2 = new Swiper('.SpaceBanner2', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // spaceBetween: 20,
        autoHeigth:true,
        // onlyExternal : true,
    });
    var spaceBanner22 = new Swiper('.SpaceBanner22', {
        spaceBetween: 20,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        onTap:swiper=>{
            swiper.slideTo(swiper.clickedIndex);
        }
        // onlyExternal : true,
        // simulateTouch : false,
        // noSwiping : true,
    });
    spaceBanner22.params.control = spaceBanner2;
    spaceBanner2.params.control = spaceBanner22;
    $("#example1").imgbox({
        'speedIn'       : 0,
        'speedOut'      : 0,
        'alignment'     : 'center',
        'overlayShow'   : true,
        'allowMultiple' : false
    });

   
    
    },
}
</script>

<style lang="scss">
    @import "../style/base/_base";
    @import "../../static/css/swiper-3.4.2.min.css";
    @import "../../static/css/lanrenzhijia.css";
.SpaceBanner1-component{
    position: relative;
   .swiper-container {
         width: 500px;
        .swiper-slide{
             width: 500px;
            img{
                // width:100%;
                width: 323px;
                height: 370px;
                margin: 0 auto;
            }
        }
    }
    .mengban{
        width: 100%;
        height: 70px;
        position: absolute;
        bottom: 0;
        z-index: 10;
        background-color:rgba(0,0,0, 0.4);
        .tit{
            position: absolute;
            bottom: 26px;
            left: 30px;
             z-index: 899;
            span{
                font-size: 18px;
                color: #fff;
            }
        }
    }
    .gallery-thumbs2{
       position: absolute;
       right: 0;
        width: 500px;
        height: 70px;
        .swiper-wrapper{
            @include vertical-centering;
             .swiper-slide{
                width: 62px;
                height: 45px;
                img{
                    width: 62px;
                    height: 45px;
                    border-radius: 5px;
                }
            }
            .swiper-slide-active{
                border: 2px solid #fff;
                border-radius: 5px;
            }
            .swiper-button-next{
                // width: 10px;
                // font-weight: bold;
            }
        }
     
    }
    // .swiper-button-next,.swiper-button-prev{
    //     opacity: 0.5;
    // }
}
</style>